<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>事件的处理</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        .div1{
            padding: 5px;
            background-color: skyblue;
        }
        .div2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: scroll;
        }
        .list li{height: 100px;}
    </style>
</head>
<div id="root">
    <h2>欢迎来{{name}}到学习</h2>
    <button v-on:click="showInfo">点我提示信息0</button>
    <button @click="showInfo1">点我提示信息1</button>
    <!--v-bind:click简写-->
    <button @click="showInfo2($event, 66)">点我提示信息2</button>
    <!--阻止默认事件-->
    <a href="https://www.baidu.com" @click.prevent="showInfo2($event, '潇洒bro')">事件修饰符-阻止</a>
    <div @click="showInfo" style="padding: 5px;">
        <button @click.stop="showInfo">阻止冒泡</button>
    </div>
    <button @click.once="showInfo">事件只触发一次</button>
    <div class="div1" @click.capture="showMsg(1)">
        事件捕获
        <div class="div2" @click="showMsg(2)">
            div2
        </div>
    </div>
    <div @click.self="showInfo" style="padding: 5px;">
        <button @click.self="showInfo">e.target是当前操作的元素时才触发</button>
    </div>
    <!--事件的默认行为立即执行 -->
    <!-- <ul class="list" @scroll="showMsg('滚动条')"> -->
    <ul class="list" @wheel.passive="demo('鼠标滚轮')">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el: '#root',
        data: {
            name: '培立优'
        },
        methods: {
            showInfo(e) {
                console.log(e.target);
                //e.stopPropagation();//阻止冒泡
                //console.log(this);
                alert("同学你好");
            },
            showInfo1: (e) => {
                console.log(this);// 注意这里的this是window,与25行不一样
            },
            showInfo2(event, num) {
                //event.preventDefault();
                console.log(event);
                alert(num + ',同学你好2');
            },
            showMsg(msg) {
                console.log(msg);
            },
            demo(msg){
                for (let i = 0; i < 10000; i++) {
                    console.log(msg);
                }
                console.log('tired')
            }
        }
    });
</script>

</html>